import React from "react";
import AMapLoader from "@amap/amap-jsapi-loader";
import { useEffect,useState } from "react";
import { Button, Select,Row,Col } from "antd";
import {areaAdd,areaGet} from '../../api/cake'
const {Option} = Select
export default function Area() {
  let center = [106.55, 29.57]  //记录用户选择的城市地图中心点
  let cityName = '重庆市'
  let map = {}; //地图实例对象
  let MyAMap;
  var polyEditor = {};
  var polygon
  let cityList = {
    '重庆市':[106.55, 29.57],
    '北京市':[116.20,39.56],
    '上海市':[121.52,31.31],
  }
  useEffect(() => {
    AMapLoader.load({
      key: "326929be57e60ab4ae208dfbbf54063d", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        MyAMap = AMap
        map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 10, //初始化地图级别
          center, //初始化地图中心点位置
        });
        mapDraw();
      })
      .catch((e) => {
        console.log(e);
      });
  }, []);

  let mapDraw = () => {
    areaGet(cityName).then(res=>{
      console.log(res);
      let polyArr = []  //存放适量图对象
      res.data.results.forEach(item=>{
        let poly = new MyAMap.Polygon({ //创建矢量图对象
            path: item.path,
        });
        poly.on("dblclick", () => { //为矢量图对象绑定双击事件
          polyEditor.setTarget(poly);
          polyEditor.open();
        });
        polyArr.push(poly)
      })
      map.add(polyArr); //向地图对象绘制矢量图形
      // map.setFitView();  //地图视图自动跳转到有矢量图的位置
      polyEditor.addAdsorbPolygons(polyArr);  //编辑矢量图
    })

    polyEditor = new MyAMap.PolygonEditor(map); //创建矢量图编辑对象
    polyEditor.on("add", function (data) { //新增矢量图
      console.log(data);
      polygon = data.target; //新的矢量图对象
      polyEditor.addAdsorbPolygons(polygon);
      polygon.on("dblclick", () => {
        polyEditor.setTarget(polygon);
        polyEditor.open();
      });
    });
  };

  function createPolygon() {  //新建矢量图
    console.log(polyEditor);
    polyEditor.close();
    polyEditor.setTarget();
    polyEditor.open();
  }

  let handleDone = ()=>{  //向数据库存储矢量图数据
    let path = polygon.getPath()  //获取新建的矢量图数据
    console.log(path);
    let arr = []
    path.forEach(({lng,lat})=>{ //将矢量图数据整合为二位数组
      arr.push([lng,lat])
    })
    areaAdd({ 
      city:cityName,
      path:arr
    })
  }
  let handleCity = (city)=>{  //选择城市
    // console.log(city);
    cityName = city
    center = cityList[city]
    map.setCenter(center) //切换地图中心点
    mapDraw()  //重新绘制矢量图
  }
  return (
    <div>
      <Row justify="between">
        <Col>
          <Button type="primary" onClick={createPolygon}>
            新建范围123
          </Button>
          <Button onClick={handleDone}>确认范围</Button>
        </Col>
        <Col>
          <Select onChange={handleCity} defaultValue="重庆市">
            <Option value="重庆市">重庆市</Option>
            <Option value="北京市">北京市</Option>
            <Option value="上海市">上海市</Option>
          </Select>
        </Col>
      </Row>
      <div
        id="container"
        style={{ height: "500px", border: "1px solid red" }}
      ></div>
    </div>
  );
}
